<template>
	<view class="box padding-30">
		<view>
			<image :src="BASE_URL + '/uploads/20250801/c76610677b16621000d1ee1f80ca588f.png'" mode="widthFix"></image>
		</view>
		<view class="margin-t-20">
			<view  v-for="(item,index) in topicList" :key="index"  >
				<view v-if="index  == page" class="topic-box bg-white padding-l-r-30 border-radio-20">
					<view class="fs-26 color-0">
						<text class="color-43 fs-30">{{index }}</text>/{{topicList.length}}
					</view>
					<view class="fs-30 color-0 topic-title">{{item.question}}</view>
					<view v-for="(e,i) in item.option" :key="i" @click="selectAnswer(index, i)"
						:class="{'active':i==answerList[index]}"
						class="options-list padding-l-r-30 fs-30 fw-b color-0 border-radio-14 margin-b-20">{{e.answer }} </view>

					<view class="next-btn flex-box">
						<view v-if="page == topicList.length " @click="submit" class="color-white fs-28">提交</view>
						<view v-else class="color-white fs-28" @click="next">下一题</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" @close="show = false" @open="open" bgColor='transparent'>
			<view class="answer-popup">
				<image src="/static/image/healthPassbook/answer-bg.png" mode=""></image>
				<view class="answer-popup-content flex-column ">
					<view class="fs-28 color-0">恭喜您获得积分</view>
					<view class="points fs-30 color-0">
						<text class="color-43 fw-b">{{points}}</text>分
					</view>
					<view class="fs-26 color-70 margin-b-30">（包含额外奖励5分）</view>
					<view class="points-box">
						<view class="points-list justifyContent-spaceBetween border-radio-14">
							<view v-for="(item , index) in posintArr" :class="{'active':item.isTrue}" :key="index" class="list-box border-radio-20 flex-column">
								<text class="fs-26 margin-b-20"> +{{item.points}}</text>
                                <view v-if="item.isTrue" style="padding-left: 20rpx">
                                    <u-icon color="#fff" name="checkmark-circle-fill"></u-icon>
                                </view>
								<text class="color-99 fs-20" v-else>第{{index+1}}题</text>
							</view>
						</view>
					</view>
                    <view class="fs-28 color-white border-radio-14 know-btn bg-43">我知道了</view>
				</view>
			</view> 
		</u-popup>
	</view>
</template>

<script>
import $baseUrl from "@/config/index.js"
const BASE_URL = $baseUrl.baseUrl
import  {questionList ,answer} from '@/api/healthPassbook'
	export default {
		data() {
			return {
                BASE_URL,
				topicList:[],
				page: 0,
				answerList: [],
				show: false,
				points: 13,
				posintArr: [{
						isTrue: true,
						points: 2
					}, {
						isTrue: true,
						points: 2
					}, {
						isTrue: true,
						points: 2
					},
					{
						isTrue: true,
						points: 2
					}, {
						isTrue: false,
						points: 2
					}
				],
                id:'',
                selectIndex:0,
			}

		},
        onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.initList()
		},
		methods: {
			getAnswer() {
				for (let i = 0; i < 5; i++) {
					this.answerList[i] = -1
				}
			},
            open(){},
            initList() {
				this.getList()
			},
            getList(){
                questionList({
                    healthart_id:this.id,page:this.page,limit:10
                }).then(res=> {
                    if (res.code ==1){
                        this.topicList = res.data
                        this.topicList.map(item=>{
                            let json =item.answer_json
                            const option = Object.keys(json).map(function(key) {
                                return {  option:key, answer:json[key]  } ;
                            });
                           item.option = option
                        })
                        console.log( this.topicList)
                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
            },
			selectAnswer(index, i) {
				// this.answerList[index] = i
				this.$set(this.answerList, index, i)
				console.log(this.answerList, i, index)
			},
			next() {

                let params = {
                    question_id:this.topicList[this.page].id,
                    answer:this.topicList[this.page].option[this.selectIndex].answer
                }
                answer(params ).then(res =>{
                    if (res.code ==1){

                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
               if (this.questionList.length > this.selectIndex){
                   this.selectIndex++
               }
			},
			submit() {
                this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #F2F8FD;
	}

	.topic-title {
		margin-bottom: 40rpx;
		margin-top: 26rpx;
	}

	.topic-box {
		padding-bottom: 88rpx;
		padding-top: 28rpx;
	}

	.options-list {
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #DBDBDB;

		&.active {
			background: #ECF9FB;
			border: 1px solid #43ABC4;
			color: #43ABC4;
		}
	}

	.next-btn {
		padding-top: 70rpx;
		justify-content: flex-end;

		.fs-28 {
			width: 240rpx;
			height: 80rpx;
			background: #43ABC4;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}

	.answer-popup {
		position: relative;
		justify-content: center;

		image {
			width: 540rpx;
			height: 713rpx;
		}

		.answer-popup-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 43rpx 40rpx 0;
			text-align: center;
		}

		.points {
			padding: 10rpx 0 6rpx;

			text {
				font-size: 90rpx;
			}
		}

		.points-box {
			padding: 22rpx 0 60rpx;
			border-top: 1px dashed #DBDBDB;
		}

		.points-list {
			width: 460rpx;
			height: 160rpx;
            padding: 20rpx 10rpx;
			background: #E0EFF3;
		}

		.know-btn {
			height: 80rpx;
			width: 240rpx;
			margin: 0 auto;
			line-height: 80rpx;
			text-align: center;
		}
        .list-box {
            justify-content: center;
            width: 80rpx;
            height: 120rpx;
            background: #F7F7F7;
            &.active {
                background: #43ABC4;
                color: #fff;
            }
        }
	}
</style>